// src/components/AdvancedCard/AdvancedCard.tsx
import React, { useState } from 'react';
import './AdvancedCard.css';
import { ClockCircleOutlined, LikeFilled, LikeOutlined, StarFilled, StarOutlined } from '@ant-design/icons';

interface AdvancedCardProps {
  app: {
    title: string;
    description: string;
    date: string;
    views: string;
    likes: string;
    comments: number;
    username: string;
    tags: string[];
    image: string;
    link: string;
  };
}

const AdvancedCard: React.FC<AdvancedCardProps> = ({app}) => {
  const [liked, setLiked] = useState(false);
  const [collected, setCollected] = useState(false);
  return (
    <div className="advanced-card">
      <div className="card-top">
        <img src={app.image} alt={app.title} className="advanced-card-image" />
        <div className="advanced-card-details">
          <h2 className="advanced-card-title">{app.title}</h2>
          <div className="advanced-card-tags">
            {app.tags.map((tag, index) => (
              <span key={index} className="advanced-card-tag">{tag}</span>
            ))}
          </div>
          <p className="advanced-card-description">{app.description}</p>
        
      
      <div className="advanced-card-actions">
        <span style={{fontSize:'1.125rem'}}><img src="/OIP.jpg" alt="用户名" /> {app.username}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem'}}>
            <ClockCircleOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} /> {app.date}
          </span>
        <span onClick={() => setLiked(!liked)} style={{ display: 'inline-flex', alignItems: 'center',color: '#81838f',fontSize: '1.125rem'}}>
            {liked ? <LikeFilled style={{ color: 'red', fontSize: '1.125rem', marginRight: '0rem' }} /> : <LikeOutlined style={{ fontSize: '1.125rem', marginRight: '0rem' }} />} {app.likes}
          </span>
          <span onClick={() => setCollected(!collected)} style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem'}}>
            {collected ? <StarFilled style={{ color: 'gold', fontSize: '1.125rem', marginRight: '0rem' }} /> : <StarOutlined style={{ fontSize: '1.125rem', marginRight: '0rem' }} />} {app.views}
          </span>
        <span style={{fontSize:'1.125rem'}}><img src="/评论.png" alt="评论量" /> {app.comments}</span>
        <button className="advanced-card-detail-button">查看详情</button>
      </div>
    
    </div>
    </div>
    </div>
  );
};

export default AdvancedCard;
